<template>
  <div class="main">
    <div class="left" :style="{backgroundColor:currectColor.color}">{{ currectColor.text }}</div>
    <div class="right">
      <div class="right-content">
        <el-row>
          <el-col v-for="(item,index) in fabStateList" :key="index" :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <factory-item class="item" :type="type" :data="item" />
          </el-col>
        </el-row>
      </div>
      <div class="bottom">
        <el-button type="text" @click="cancel">收回</el-button>
        <el-button type="text" :loading="loading" @click="load">展示更多</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import FactoryItem from './factoryItem.vue'
export default {
  components: { FactoryItem },
  props: {
    type: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      loading: false,
      url: {
        getFabInfoList: this.$api.ProductionController.getFabInfoList
      },
      params: {
        'page': 1,
        'pageSize': 20,
        'fabId': '',
        'state': ''
      },
      fabStateList: [],
      testingColor: {
        color: '#8EBE47',
        text: 'TESTING'
      },
      holdColor: {
        color: '#DBD62F',
        text: 'HOLD'
      },
      idleColor: {
        color: '#D5665C',
        text: 'IDLE'
      },
      currectColor: {}
    }
  },
  watch: {
    type: function(newVal, oldVal) {
      if (newVal === 1) {
        this.currectColor = this.testingColor
      } else if (newVal === 2) {
        this.currectColor = this.holdColor
      } else if (newVal === 3) {
        this.currectColor = this.idleColor
      }
    }
  },
  mounted() {
    if (this.type === 1) {
      this.currectColor = this.testingColor
    } else if (this.type === 2) {
      this.currectColor = this.holdColor
    } else if (this.type === 3) {
      this.currectColor = this.idleColor
    }
  },
  methods: {
    init(fabId) {
      this.params.fabId = fabId
      if (this.type === 1) {
        this.params.state = 'testing'
      } else if (this.type === 2) {
        this.params.state = 'hold'
      } else if (this.type === 3) {
        this.params.state = 'idle'
      }
      this.getFabInfoList()
    },
    // 工厂列表
    getFabInfoList() {
      this.$fetchData(this.url.getFabInfoList, this.params, 'post').then(res => {
        this.fabStateList = res.data
      })
      if (this.type === 1) {
        this.fabStateList = [
          {
            'machineId': '33',
            'realYield': '36.3%', // 实时良率
            'realOEE': '2036', // 实时OEE
            'realUPH': '4654', // 实时UPH
            'testTotal': '89'// 当前测试总量
          },
          {
            'machineId': '35',
            'realYield': '38.3%', // 实时良率
            'realOEE': '3036', // 实时OEE
            'realUPH': '854', // 实时UPH
            'testTotal': '84'// 当前测试总量
          }, {
            'machineId': '36',
            'realYield': '26.3%', // 实时良率
            'realOEE': '286', // 实时OEE
            'realUPH': '4354', // 实时UPH
            'testTotal': '89'// 当前测试总量
          }
        ]
      } else if (this.type === 2) {
        this.fabStateList = [
          {
            'machineId': '33',
            'exception': '温度异常',
            'holdDuration': '23', // hold时长/min
            'beforeYield': '36.3%', // 实时良率/%
            'beforeOEE': '2036', // 实时OEE
            'beforeUPH': '4654', // 实时UPH
            'beforeTestTotal': '89'// 当前测试总量
          },
          {
            'machineId': '34',
            'exception': '设备异常',
            'holdDuration': '23', // hold时长/min
            'beforeYield': '36.3%', // 实时良率/%
            'beforeOEE': '2036', // 实时OEE
            'beforeUPH': '4654', // 实时UPH
            'beforeTestTotal': '89'// 当前测试总量
          }
        ]
      } else if (this.type === 3) {
        // this.fabStateList = [
        //   {
        //     'machineId': '33', // Tester ID - SERLNumber
        //     'lastTestEndTime': '2024/09/24 09:16', // 上次测试结束时间
        //     'hisYield': '26%', // 历史良率
        //     'hisOEE': '67%', // 历史OEE
        //     'hisUPH': '-448'// 历史UPH
        //   },
        //   {
        //     'machineId': '34',
        //     'lastTestEndTime': '2024/10/08 10:16', // 上次测试结束时间
        //     'hisYield': '36.3%', // 历史良率
        //     'hisOEE': '64%', // 历史OEE
        //     'hisUPH': '453'// 历史UPH
        //   },
        //   {
        //     'machineId': '35',
        //     'lastTestEndTime': '2024/10/11 12:16', // 上次测试结束时间
        //     'hisYield': '33.3%', // 历史良率
        //     'hisOEE': '61%', // 历史OEE
        //     'hisUPH': '333'// 历史UPH
        //   },
        //   {
        //     'machineId': '36',
        //     'lastTestEndTime': '2024/10/13 17:30', // 上次测试结束时间
        //     'hisYield': '48.3%', // 历史良率
        //     'hisOEE': '23%', // 历史OEE
        //     'hisUPH': '574'// 历史UPH
        //   },
        //   {
        //     'machineId': '35',
        //     'lastTestEndTime': '2024/10/14 12:16', // 上次测试结束时间
        //     'hisYield': '78.3%', // 历史良率
        //     'hisOEE': '64%', // 历史OEE
        //     'hisUPH': '743'// 历史UPH
        //   },
        //   {
        //     'machineId': '36',
        //     'lastTestEndTime': '2024/10/16 13:16', // 上次测试结束时间
        //     'hisYield': '22.3%', // 历史良率
        //     'hisOEE': '54%', // 历史OEE
        //     'hisUPH': '342'// 历史UPH
        //   },
        //   {
        //     'machineId': '35',
        //     'lastTestEndTime': '2024/10/18 12:26', // 上次测试结束时间
        //     'hisYield': '38.3%', // 历史良率
        //     'hisOEE': '62%', // 历史OEE
        //     'hisUPH': '5533'// 历史UPH
        //   },
        //   {
        //     'machineId': '36',
        //     'lastTestEndTime': '2024/10/19 18:46', // 上次测试结束时间
        //     'hisYield': '36.3%', // 历史良率
        //     'hisOEE': '55%', // 历史OEE
        //     'hisUPH': '454'// 历史UPH
        //   }
        // ]
      }
    },
    cancel() {

    },
    load() {

    }
  }
}
</script>

<style lang="scss"  scoped>
.main{
  display: flex;
  flex-direction: row;
  height: 100%;
}
.left{
  width: 10%;
  color: white;
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right{
  width: 90%;
  background:#fafafa;
// flex-direction: row;
  // flex-direction: column;
  // .right-content{
  //   display: flex;
  //   flex-wrap: wrap;
  //   .item{
  //     flex: 0 0 23.5%;
  //     margin: 10px;
  //   }
  // }
}
.bottom{
  background-color: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  .el-button{
    color: gray;
  }
}
</style>
